<script setup lang="ts">
import myTitle from "@/components/myTitle/myTitle.vue";
const title = ref("图文问诊");
const value = ref<string>("");
const value1 = ref<string>("");
const value2 = ref<string>("");
const flag = ref(true);
function change(e: string) {
  console.log(e);
  if (e != "" && value.value != "") {
    flag.value = false;
  }
}
const src = ref<string>("");
const imgSrc = ref<string>("");
const show = ref<boolean>(false);

function upload() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePaths = res.tempFilePaths[0];
      src.value = tempFilePaths;
      show.value = true;
    },
  });
}
function handleConfirm(event: any) {
  const { tempFilePath } = event;
  imgSrc.value = tempFilePath;
}
function imgLoaderror(res: any) {
  console.log("加载失败", res);
}
function imgLoaded(res: any) {
  console.log("加载成功", res);
}
function handleCancel(event: any) {
  console.log("取消", event);
}
const textRight = ref("/src/static/zhqImg/share@1x.png");
</script>
<!-- 这是描述病情页面 -->
<template>
  <div class="" style="background-color: #fff">
    <view>
      <myTitle :title="title" :textRight="textRight" :if-text="true" />
    </view>
    <view style="display: flex">
      <view>
        <img style="width: 100rpx; height: 150rpx" src="/src/static/doctor/15.jpg" alt="" />
      </view>
      <view style="margin-left: 20rpx">
        <view>王先生</view>
        <view
          style="
            box-sizing: border-box;
            padding: 20rpx;
            margin: 20rpx 0;
            font-size: 25rpx;
            background-color: #fafafa;
          "
        >
          请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
        </view>
        <view style="font-size: 20rpx">
          <img
            style="width: 20rpx; vertical-align: middle"
            src="/src//static/doctor/18.png"
            alt=""
          />
          <text>内容仅医生可见</text>
        </view>
      </view>
    </view>
    <view>
      <wd-textarea v-model="value" placeholder="请详细描述您的病情" />
    </view>
    <view style="width: 95%; margin: auto; margin-top: 20rpx">本次患病多久了</view>
    <view style="width: 95%; margin: auto; margin-top: 20rpx">
      <wd-radio-group v-model="value1" shape="button" checked-color="#72cec3" @change="change">
        <wd-radio value="一周内">一周内</wd-radio>
        <wd-radio value="一月内">一月内</wd-radio>
        <wd-radio value="半年内">半年内</wd-radio>
        <wd-radio value="大于半年">大于半年</wd-radio>
      </wd-radio-group>
    </view>
    <view style="width: 95%; margin: auto; margin-top: 60rpx">此次病情是否去医院就诊过</view>
    <view style="width: 95%; margin: auto; margin-top: 20rpx">
      <wd-radio-group v-model="value2" shape="button" checked-color="#72cec3" @change="change">
        <wd-radio value="就诊过">就诊过</wd-radio>
        <wd-radio value="没就诊过">没就诊过</wd-radio>
      </wd-radio-group>
    </view>
    <view style="width: 95%; margin: auto">
      <wd-img-cropper
        v-model="show"
        :img-src="src"
        @confirm="handleConfirm"
        @cancel="handleCancel"
      />
      <view class="profile">
        <view v-if="!imgSrc" class="img" @click="upload">
          <img src="/src/static/doctor/19.png" alt="" />
        </view>
        <wd-img
          v-if="imgSrc"
          round
          width="200px"
          height="200px"
          :src="imgSrc"
          mode="aspectFit"
          custom-class="profile-img"
          @click="upload"
        />
        <view style="font-size: 14px">上传内容仅医生可见</view>
      </view>
    </view>
    <view style="width: 95%; margin: auto">
      <wd-button style="background-color: #16c2a3" block :disabled="flag">下一步</wd-button>
    </view>
  </div>
</template>

<style lang="scss" scoped>
:deep() {
  .wd-radio {
    border-radius: 10rpx !important;
  }

  .profile {
    display: flex;
    align-items: center;
  }

  .img {
    width: 200rpx;
  }
}
</style>
